import { createRouter, createWebHashHistory, RouterView } from 'vue-router'
import store from '@/store'
import { h } from 'vue'
const Layout = () => import('@/views/Layout')
const Home = () => import('@/views/home')
const TopCategory = () => import('@/views/category/index')
const SubCategory = () => import('@/views/category/subCategory')
const Search = () => import('@/views/search')
const Goods = () => import('@/views/goods/index')
const Cart = () => import('@/views/cart/index')
const Login = () => import('@/views/login/login')
const Regist = () => import('@/views/regist')
const Forget = () => import('@/views/forget')
const PayCheckout = () => import('@/views/member/pay/checkout')
const PayIndex = () => import('@/views/member/pay/index')
const PayResult = () => import('@/views/member/pay/pay-result')
const Brand = () => import('@/views/brand')
const BrandDetail = () => import('@/views/brand/brand-detail')
const SpecialIndex = () => import('@/views/special')
const SpecialClassify = () => import('@/views/special/special-classify')
const SpecialDetail = () => import('@/views/special/special-detail')
// 更多新鲜好物
const NewGoods = () => import('@/views/newgoods/index')
// 个人中心布局容器
const MemberLayout = () => import('@/views/member/Layout')
// 个人中心首页
const MemberHome = () => import('@/views/member/home')
const MemberPersonalInfo = () => import('@/views/member/information')
const MemberOrder = () => import('@/views/member/order')
const MemberOrderDetail = () => import('@/views/member/order/detail')
const MemberEvaluateHome = () => import('@/views/member/evaluate/index')
const EvaluateOrderPublish = () => import('@/views/member/evaluate/evaluate-publish')
const OrderEvaluateDetail = () => import('@/views/member/evaluate/evaluate-detail')
const MemberCollectGoods = () => import('@/views/member/collect/collect-goods')
const MemberCollectSpecial = () => import('@/views/member/collect/collect-special')
const MemberCollectBrands = () => import('@/views/member/collect/collect-brands')
const MemberFootmarks = () => import('@/views/member/footmarks')
const MemberAccount = () => import('@/views/member/account')
const MemberUpdateMobile = () => import('@/views/member/account/update-mobile')
const MemberAddressManage = () => import('@/views/member/address')
const MemberMessageManage = () => import('@/views/member/message')
const MemberCoupons = () => import('@/views/member/coupons')
const MemberGiftCard = () => import('@/views/member/giftcard')
const AppDownload = () => import('@/views/appdown')
const LoginCallback = () => import('@/views/login/callback')
const HelpLayout = () => import('@/views/help/Layout')
const HelpHome = () => import('@/views/help/home')
// 路由规则
const routes = [
  // 一级路由布局容器
  {
    path: '/',
    component: Layout,
    children: [
      { path: '/', component: Home },
      { path: '/category/:id', component: TopCategory },
      { path: '/category/sub/:id', component: SubCategory },
      { path: '/product/:id', component: Goods },
      { path: '/cart', component: Cart },
      { path: '/member/checkout', component: PayCheckout },
      { path: '/member/pay', component: PayIndex },
      { path: '/pay/callback', component: PayResult },
      { path: '/brand', component: Brand },
      { path: '/brand/brand-detail/:id', component: BrandDetail },
      { path: '/special', component: SpecialIndex },
      { path: '/special/special-classify/:id', component: SpecialClassify },
      { path: '/special/special-detail/:id', component: SpecialDetail },
      { path: '/search', component: Search },
      { path: '/member/evaluate/:id', component: EvaluateOrderPublish },
      { path: '/member/evaluate-detail/:id', component: OrderEvaluateDetail },
      { path: '/newgoods', component: NewGoods },
      {
        path: '/help',
        component: HelpLayout,
        children: [
          { path: '/help', component: HelpHome }
        ]
      },
      {
        path: '/member',
        component: MemberLayout,
        children: [
          { path: '/member', component: MemberHome },
          // { path: '/member/order', component: MemberOrder },
          // { path: '/member/order/:id', component: MemberOrderDetail }
          {
            path: '/member/order',
            // 创建一个routerview容器形成嵌套关系
            component: { render: () => h(<RouterView />) },
            children: [
              { path: '', component: MemberOrder },
              { path: ':id', component: MemberOrderDetail }
              // { path: '/member/order/order-evaluate/:id', component: MemberOrderEvaluate }
            ]
          },
          {
            path: '/member/evaluate',
            // 创建一个routerview容器形成嵌套关系
            component: { render: () => h(<RouterView />) },
            children: [
              { path: '', component: MemberEvaluateHome }
            ]
          },
          {
            path: '/member/collect',
            // 创建一个routerview容器形成嵌套关系
            component: { render: () => h(<RouterView />) },
            children: [
              { path: '/member/collect/goods', name: 'MemberCollectGoods', component: MemberCollectGoods },
              { path: '/member/collect/special', name: 'MemberCollectSpecial', component: MemberCollectSpecial },
              { path: '/member/collect/brands', name: 'MemberCollectBrands', component: MemberCollectBrands }
            ]
          },
          {
            path: '/member/footmarks',
            // 创建一个routerview容器形成嵌套关系
            component: { render: () => h(<RouterView />) },
            children: [
              { path: '', component: MemberFootmarks }
            ]
          },
          {
            path: '/member/account',
            // 创建一个routerview容器形成嵌套关系
            component: { render: () => h(<RouterView />) },
            children: [
              { path: '/member/account', component: MemberAccount },
              { path: '/member/account/update-mobile', component: MemberUpdateMobile }
            ]
          },
          {
            path: '/member/address',
            // 创建一个routerview容器形成嵌套关系
            component: { render: () => h(<RouterView />) },
            children: [
              { path: '', component: MemberAddressManage }
            ]
          },
          {
            path: '/member/message',
            // 创建一个routerview容器形成嵌套关系
            component: { render: () => h(<RouterView />) },
            children: [
              { path: '', component: MemberMessageManage }
            ]
          },
          {
            path: '/member/information',
            // 创建一个routerview容器形成嵌套关系
            component: { render: () => h(<RouterView />) },
            children: [
              { path: '', component: MemberPersonalInfo }
            ]
          },
          {
            path: '/member/coupons',
            // 创建一个routerview容器形成嵌套关系
            component: { render: () => h(<RouterView />) },
            children: [
              { path: '', component: MemberCoupons }
            ]
          },
          {
            path: '/member/giftcard',
            // 创建一个routerview容器形成嵌套关系
            component: { render: () => h(<RouterView />) },
            children: [
              { path: '', component: MemberGiftCard }
            ]
          }
        ]
      }
    ]
  },
  { path: '/login', component: Login },
  { path: '/login/callback', component: LoginCallback },
  { path: '/regist', component: Regist },
  { path: '/forget', component: Forget },
  { path: '/appdown', component: AppDownload }
]
// vue2.x new VueRouter({}) 创建路由实例
// vue3.x createRouter（{}）创建路由实例
const router = createRouter({
  history: createWebHashHistory(),
  routes,
  // 每次切换路由的时候滚动到页面顶部
  scrollBehavior () {
    // vue2 x y 控制
    // vue3 left top 控制
    return { left: 0, top: 0 }
  }
})
// 前置导航守卫
router.beforeEach((to, from, next) => {
  // 需要登录的路由：地址是以 /member 开头
  const { profile } = store.state.user
  if (to.path.startsWith('/member') && !profile.token) {
    next({ path: '/login', query: { redirectUrl: to.fullPath } })
  }
  next()
})
export default router
